<template>
  <el-dialog title="流程图" :visible.sync="selfFlow" class="flow-dialog" center :before-close="handleClose" :close-on-click-modal="false">
    <img class="flow-img" :src="url" v-if="url!==''"/>
  </el-dialog>
</template>

<script>
  export default {
    props: {
      // 传入一个value，使组件支持v-model绑定
      visible: {
        type: Boolean,
        default: false
      },
      flowId: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        url: '',
        selfFlow: this.visible,
        selfId: this.flowId
      }
    },
    watch: {
      visible(val) {
        this.selfFlow = val
      },
      flowId(val) {
        this.selfId = val
        this.getData()
      }
    },
    mounted() {
      this.getData()
    },
    methods: {
      getData() {
        const vm = this
        if (vm.selfId) {
          vm.$axios({
            method: 'get',
            url: '/act/getProcImage/' + this.selfId,
            responseType: 'arraybuffer' // 此处是设置请求的为流文件
          }).then(res => {
            vm.url = 'data:image/png;base64,' + btoa(new Uint8Array(res).reduce((data, byte) => data + String.fromCharCode(byte), ''))
          })
        }
      },
      handleClose(done) {
        this.$emit('update:visible', false)
        done()
      }
    }
  }
</script>

<style type="text/scss" lang="scss" scoped>
  .flow-dialog {
    width: 100%;
    height: 100%;
    .flow-img {
      width: 100%;
      height: 100%;
    }
  }

  .flow-dialog /deep/ .el-dialog__header, .flow-dialog /deep/ .el-dialog__body {
    padding: 10px;
  }
</style>
